<template>
	<view class="monitor-view">
		<page-head :transparent='false'>
			<slot slot="title">{{title.length>10?title.substr(0,10)+'...':title}}</slot>
		</page-head>
		<view class="main-img-view">
			<image src="../../static/img/health-monitoring/img_1.png" mode="scaleToFill"></image>
		</view>
		<view style="height: 8%;"></view>
		<view class="main-img-txt">
			<view class="monitor-title">
				<view class="m-title-text">
					<text>AI健康检测</text>
				</view>
			</view>
			<view class="monitor-detail">
				<view class="m-detail-one">
					<text>美国和欧洲专利，9大体质，6大系统</text>
				</view>
				<view class="m-detail-text">
					<text>报告精准清晰，深度剖析体质</text>
				</view>
			</view>
			<view class="monitor-btn">
				<view class="m-btn-report" @click="toReport">
					<view class="m-btn-report-txt">
						<text>
							查看健康报告
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onShow() {
			genCommonData();
			this.ti = "AI健康检测";
		},
		data() {
			return {
				title: 'AI健康检测'
			}
		},
		methods: {
			async toReport() {
				let res = await this.$request.get('/coupon-admin/ezt/eztreport/customer/get');
				let datas = res.data;
				if (datas.code == 401) {
					uni.showToast({
						icon: 'none',
						title: '没有权限'
					});
				} else if (datas.code == 200) {
					// console.log("no auth")
					let url = datas.data.reportUrl;
					appNavigateTo(url);
				} else if (datas.code == 30007) {
					uni.showToast({
						icon: 'none',
						title: '暂时没有您的检测报告记录'
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: datas.msg
					});
				}

			}
		}
	}
</script>

<style lang="scss">
	.monitor-view {
		width: 100%;
		background-color: #fff6ee;

		.main-img-view {
			width: 100%;
			height: 40%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.main-img-txt {
			.monitor-title {
				width: 100%;
				font-size: 40px;
				color: #ffa65e;
				font-weight: 900;
				display: flex;
				justify-content: center;
			}

			.monitor-detail {
				width: 100%;
				height: 200px;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				color: #ff866a;
				font-size: 30px;
			}

			.monitor-btn {
				width: 100%;
				height: 240px;
				display: flex;
				justify-content: center;
				align-items: center;

				.m-btn-report {
					width: 500px;
					height: 100px;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50px;
					background: -webkit-linear-gradient(left, #FE7F4E, #FF704F);
					background: -o-linear-gradient(right, #FE7F4E, #FF704F);
					background: -moz-linear-gradient(right, #FE7F4E, #FF704F);
					background: linear-gradient(to right, #FE7F4E, #FF704F);
					color: white;
					font-weight: 600;
				}
			}
		}
	}
</style>
